Vue.component('fviz-echarts', {
    mixins: [fvizMixin],
    render: function (createElement) {
        let isAbsloute = (FViz.LAYTOUT_ABSLOUTE == this.objVal.layoutMode);
        let me = this;
        //图表容器样式
        let contStyle = {
            width: this.objConfig.width + "px",
            height: this.objConfig.height + "px",
        };

        if (isAbsloute) {
            contStyle.left = this.objConfig.left + "px";
            contStyle.top = this.objConfig.top + "px";
            contStyle.position = "absolute";
            //"z-index": (++cnt) * 30
        }

        //翻转样式
        if (this.objConfig.turnAngle && this.objConfig.turnAngle != 0) {
            contStyle["transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-ms-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-moz-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-webkit-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-o-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
        }



        //图表容器定义
        let renderCont =
            createElement('div', {
                ref: "renderCont",
                style: contStyle,
                on: {
                    mouseover: function (event) {
                        if (isAbsloute) {
                            $(event.currentTarget).addClass("fviz-container-bg");
                        }
                    },
                    click: function (event) {
                        if (isAbsloute) {
                            $(event.currentTarget).addClass("fviz-container-bg");
                        }
                    }
                }
            });

        //宽度高度不能在wrap div上，否则拖动时候wrap div不能移动
        //wrap div
        if (isAbsloute && !this.preview) {
            return createElement('div',
                [renderCont]
            );
        } else {
            return renderCont;
        }

    },
    props: {
    },
    data() {
        return {
            lastArea: 0,
            objConfig: {},
            options: {},
            axisVizType: [//有x、y轴的控件集合
                'line', 'bar'
            ],
            theme: {}
        }
    },
    watch: {
        objVal: {
            handler() {
                if (this.refreshable) { //拖拽调整大小避免二次刷新，通过变量控制
                    /**
                     * 通过延时解决刷新频率高的问题
                     */
                    clearTimeout(this.timer);
                    this.timer = setTimeout(() => {
                        this.refresh()
                    }, 800);
                }
                this.refreshable = true;
            },
            deep: true
        }
    },
    methods: {
        //图表容器大小
        getArea() {
            return this.$refs.renderCont.offsetWidth * this.$refs.renderCont.offsetHeight
        },
        //初始化
        initialize() {
            if (this.chart) {
                return
            }

            // chart初始化
            let chart = echarts.init(this.$refs.renderCont, this.theme, this.objConfig.initOptions)
            chart.setOption(this.options || {}, true)
            if (this.objConfig.autoresize) {
                this.lastArea = this.getArea()
                this.__resizeHandler = _.debounce(() => {
                    if (this.lastArea === 0) {
                        this.mergeOptions({}, true)
                        this.resize()
                        this.mergeOptions(this.options || {}, true)
                    } else {
                        this.resize()
                    }
                    this.lastArea = this.getArea()
                }, 100, { leading: true })
                addResizeListener(this.$refs.renderCont, this.__resizeHandler);
            }
            this.chart = chart;

            //根据图表取数方式挂载数据
            this.loadData();
        },
        mergeOptions(options, notMerge, lazyUpdate) {
            if (!this.chart) {
                this.initialize()
            } else {
                this.delegateMethod('setOption', options, notMerge, lazyUpdate)
            }
        },
        resize(options) {
            this.delegateMethod('resize', options)
        },
        clear() {
            this.delegateMethod('clear')
        },
        dispose() {
            this.delegateMethod('dispose')
        },
        destroy() {
            if (this.objConfig.autoresize) {
                removeResizeListener(this.$refs.renderCont, this.__resizeHandler)
            }
            this.dispose()
            this.chart = null
        },
        handleConfig() {//echarts 配置项信息转换
            this.objVal.preview = this.preview;
            let ecdConfig = new ECDConfig(this.objVal);
            this.objConfig = ecdConfig.getConfig();
            this.options = this.objConfig.options;

            //console.log("objConfig: " + JSON.stringify(this.objConfig));
            //console.log("options: " + JSON.stringify(this.objConfig.options));

            if (this.objConfig.theme)
                this.theme = eval(this.objConfig.theme);

        },
        refresh() {
            if (this.chart) {
                this.destroy()

                //echarts 配置项信息转换
                this.handleConfig();

                this.initialize()
            }
        },
        delegateMethod(name, ...args) {
            if (!this.chart) {
                this.initialize()
            }
            return this.chart[name](...args)
        },
        loadData() {
            let me = this;
            let dataConfig = this.objConfig.dataConfig;
            if ('sql' == dataConfig.dataType) {
                let ds = dataConfig.data_source;
                if (ds) {
                    let isAxisWidget = ECD.isAxisWidget(me.objConfig.vizType);
                    let url = fwebFormBasePath + "run/" + ds.formCode + ds.dsPath;
                    if (isAxisWidget) {//有X、Y轴元素
                        let axisBind = this.objConfig.axisBindConfig;

                        if (!axisBind.xBindField) {
                            fvizMessager("错误", '缺少X轴绑定字段信息');
                            return;
                        }
                        if (!axisBind.yBindFields) {
                            fvizMessager("错误", '缺少Y轴绑定字段信息');
                            return;
                        }
                        $.getJSON(url, function (res) {
                            let param = {
                                data: res.rows,
                                doubleY: me.objConfig.doubleY,
                                doubleX: me.objConfig.doubleX,
                                chartType: me.objConfig.vizType,
                                xAxisField: axisBind.xBindField,
                                yAxisField: axisBind.yBindFields,
                                objVal: me.objVal
                            }
                            debugger;
                            //数据转换
                            let ecdc = new ECDConverter(param);
                            let renderData = ecdc.getRenderData();

                            let optData = { series: renderData.series };
                            if ('fviz-echarts_flip-bar' == me.objConfig.comCode) {
                                optData.yAxis = {
                                    data: renderData.categories
                                }
                            } else {
                                optData.xAxis = {
                                    data: renderData.categories
                                }
                            }
                            me.chart.setOption(optData);

                        }).error(function (res) {
                            fvizMessager("错误", "加载数据错误!");
                            console.log("ERROR INFO:  " + JSON.stringify(res));
                        })
                    }

                    let isPieWidget = ECD.isPieWidget(me.objConfig.vizType);
                    if (isPieWidget) {//饼图
                        $.getJSON(url, function (res) {
                            let param = {
                                data: res.rows,
                                chartType: me.objConfig.vizType,
                                innerRadius: me.objConfig.innerRadius,
                                outerRadius: me.objConfig.outerRadius,
                                roseType: me.objConfig.roseType,
                                objVal: me.objVal
                            }
                            //数据转换
                            let ecdc = new ECDConverter(param);
                            let renderData = ecdc.getRenderPieData();
                            me.chart.setOption(renderData);
                        }).error(function (res) {
                            fvizMessager("错误", "加载数据错误!");
                            console.log("ERROR INFO:  " + JSON.stringify(res));
                        })
                    }

                } else {
                    fvizMessager("错误", "缺少数据源配置信息 !");
                }

            } else if ('api' == dataConfig.dataType) {
                if (!dataConfig.dataUrl) {
                    fvizMessager("错误", "缺少数据资源URL信息!");
                    return;
                }
                let url = fwebFormBasePath + dataConfig.dataUrl;
                $.getJSON(url, function (res) {
                    let optData = { series: res.data.series };
                    if ('fviz-echarts_flip-bar' == me.objConfig.comCode) { //横向柱图
                        optData.yAxis = {
                            data: res.data.categories
                        }
                    } else {
                        optData.xAxis = {
                            data: res.data.categories
                        }
                    }
                    me.chart.setOption(optData);
                }).error(function (res) {
                    fvizMessager("错误", "加载数据错误!");
                    console.log("ERROR INFO:  " + JSON.stringify(res));
                })
            } else {
                me.chart.setOption({
                    xAxis: {
                        data: this.objVal.renderData.categories
                    },
                    series: this.objVal.renderData.series
                });
            }
        }
    },
    created() {
        //echarts 配置项信息转换
        this.handleConfig();
    },
    mounted() {
        if (this.options) {
            this.initialize()
        }

        //绑定拖拽，调整尺寸
        this.bindDrag('renderCont');
        this.bindResize('renderCont');

    },
    activated() {
        if (this.autoresize) {
            this.chart && this.chart.resize()
        }
    },
    destroyed() {
        if (this.chart) {
            this.destroy()
        }
    },
    graphic: echarts.graphic
})
